<template>
  <div>
    <div style="position: fixed; z-index: 99; top: 0; left: 0; width: 100%">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="left"
        background="#4bd863"
        left-icon="none"
        right-icon="search"
        @focus="toSearch"
      >
        <template v-slot:left>
          <div @click="back" style="margin-right: 5px; margin-left: -3px">
            <van-icon name="arrow-left" size="1.7rem" color="white" />
          </div>
        </template>
      </van-search>
      <div class="positionDetail">
        <div style="flex: 4; margin-left: 10px">您当前所在位置：{{mycity}}</div>
        <div style="flex: 1">重新定位</div>
      </div>
      <div class="hotCity">
        <div style="font-size: 12px; font-weight: bold">热门城市：</div>
        <div class="hotCitys">
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
          <div>上海</div>
        </div>
      </div>
    </div>
    <div style="height: 1px; width: 100%; background: #4bd863"></div>
    <div class="selectCity">
      <van-index-bar
        class="indexBar"
        :sticky="false"
        @select="selectIndexBar"
        ref="indexBar"
        style=""
        :index-list="indexList"
      >
        <div v-for="(item, index) in citys" :key="index">
          <van-index-anchor :index="item.initial"> </van-index-anchor>
          <van-cell
            :title="cityName.name"
            v-for="(cityName, index) in item.list"
            :key="index"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

// <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DGYj9zXXuD7CDpPSWAaxgwdYyHEkpZ00"></script>


<script>
import myBMap from "@/utils/Bmap";
import city from "@/assets/mock/city.json";
export default {
  name: "position",
  data() {
    return {
      citys: city.city,
      value: "",
      indexList: [],
      mycity:'',
    };
  },
  mounted() {
    this.getCity();
    // console.log(this.citys);
    this.citys.map((item) => {
      this.indexList.push(item.initial);
    });
    this.$refs.indexBar.children[0].$el.parentNode.previousSibling.style.top =
      "60%";
  },
  methods: {
     toSearch() {},
  back() {
    this.$router.back();
  },
   
    selectIndexBar() {
      console.log(1);
    },
     getCity(){
        myBMap.init().then(BMap=>{
          const geolocation = new BMap.Geolocation()
          geolocation.getCurrentPosition((position)=>{
            let city = position.address.city;             //获取城市信息
            // let province = position.address.province;     //获取省份信息
            this.mycity=city
            // console.log(province)
          },(e)=>{
            console.log(e)
            console.log('定位失败')
          }, {provider: 'baidu'})
        })
      },

  },

 
};
</script>

<style lang="less" scoped>
.indexBottom {
  margin-top: 200px;
}
.selectCity {
  position: absolute;
  z-index: -1;
  top: 160px;
  /deep/ .van-index-anchor {
    padding-top: 220px;
    margin-top: -200px;
  }
  /deep/ .van-index-bar__index {
    font-size: 14px;
    line-height: 15px;
  }
}
.positionDetail {
  // margin-top: 40px;
  box-sizing: border-box;
  height: 30px;
  display: flex;
  line-height: 30px;
  border-bottom: 1px solid rgb(243, 240, 240);
  font-size: 12px;
  justify-content: space-between;
  color: #4bd863;
  background: #faf6f6;
}

.hotCity {
  // height: 120px;
  padding: 3px 5px;
  background: #faf6f6;
  .hotCitys {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #4bd863;
    div {
      margin: 5px 8px;
      // flex: 1;
      border-radius: 5px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border: 1px solid #dddada;
      width: 20%;
      font-size: 10px;
    }
  }
}
</style>
